<%--
  Created by IntelliJ IDEA.
  User: 乔见东方姑娘
  Date: 2023/10/9
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>注册</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <style>
        #login{padding-left: 100px;
            padding-top: 100px;width: 60%}
    </style>
    <script src="/static/js/jquery-3.7.0.js"></script>
    <script>
        //文档加载以后立即执行
        $(document).ready(function (){
            //输入框失去焦点，获取昵称
            //blur 失去焦点事件
            $("#nickname2").blur(function (){
                const nickname= this.value;
                alert("nickname:"+nickname)
                $.ajax({
                    type: "GET",//数据提交类型
                    url: "/hasNickname",//提交到哪里
                    data: "nickname="+nickname,
                    dataType: "text",
                    success: function(d){//d 回调函数，服务器执行完之后， 接收服务器响应的数据
                       if("true"==d){
                           $("#nameMsg").text("此用户已存在，请重新输入")
                           $("#registerBtn").attr('disabled',false);
                       }
                    },
                    error: function (d,errorThrown){
                        // $("#div").text(d.responseText+" "+d.status+"  "+d.readyState+" " +errorThrown);
                        alert("程序出错")
                    }
                });
            })
        })
    </script>
</head>
<body>
<div id="login">
    <form action="/register" method="post">

        <div class="form-group">
            <label for="name">User name</label>
            <input type="text" class="form-control" id="name" name="username" placeholder="User name">
        </div>
        <div class="form-group">
            <label for="nickname2">Nick name</label>
            <input type="text" class="form-control" id="nickname2" name="nickname" placeholder="Nick name" value="${sessionScope.user.nickname}">
        </div>
        <div class="form-group">
            <span id="nameMsg">${sessionScope.msg}</span>
        </div>
        <div class="form-group">
            <label for="Password">Password</label>
            <input type="password" class="form-control" id="Password" name="password" placeholder="Password">
        </div>
        <div class="form-group">
            <a href="login.jsp">已有账号？立即登录</a>
        </div>
        <div class="form-group">
            <span id="msg">${sessionScope.msg}</span>
        </div>
        <button type="submit" id="registerBtn" class="btn btn-default">注册</button>
    </form>
    </div>
</body>
</html>
